<template>
    <div>
        <div class="top">
            用户管理系统
            <el-dropdown class="username" @command="handleCommand">
                <span class="el-dropdown-link">
                    {{account}}<i class="el-icon-caret-bottom el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="out">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <div class="mainbody">
            <div class="left-menu">
            <div class="menue-content">
                <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                             theme="dark" style="border-radius: 0px">
                        <el-submenu index="1">
                            <template slot="title">用户管理</template>
                            <router-link to="/index/add">
                                <el-menu-item index="1-1">新增</el-menu-item>
                            </router-link>
                            <router-link to="/index/query">
                                <el-menu-item index="1-2">查看</el-menu-item>
                            </router-link>
                        </el-submenu>
                    </el-menu>
            </div>
            </div>
        </div>
        <el-col :xs="24" :sm="20" :md="20" :lg="19" class="main-content">
            <router-view></router-view>
        </el-col>
    </div>
</template>
<script>
    import {getCookie} from '@/lib/cookie'
    import {delCookie} from '@/lib/cookie'
    export default {
        name: 'index',
        data () {
            return {
                account: getCookie('username')
            }
        },
        components: {
        },
        methods: {
            handleOpen(key, keyPath) {
//                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
//                console.log(key, keyPath);
            },
            handleCommand(command){
                delCookie('username');
                this.$message({
                            message: '退出成功',
                            type: 'success'
                        });
                        setTimeout(function () {
                            this.$router.push({
                                path: 'login'
                            })
                }.bind(this), 1000)
            }
        },


    }
</script>
<style scoped>
    #app {
        position: relative;
    }
    .top {
        background: #324157;
        text-align: left;
        font-size: 30px;
        color: #fff;
        position: fixed;
        width: 100%;
        z-index: 100;
        padding: 0 20px;
    }
    .main-content {
        margin: 80px 0 0 220px;
    }
    .el-dropdown-link {
        color: #FFF;
        float: right;
    }
    .username {
        float: right;
        margin: 20px 50px;
    }
    .mainbody {
        position: fixed;
        top: 48px;
        bottom: 0;
    }
    .left-menu {
        height: 100%;
        width: 200px;
    }
    .menue-content {
        height: 100%
    }
    .el-menu {
        height: 100%
    }
    .el-submenu {
        text-align: left;
    }
</style>
